<template>
    <div class="News">
        <ul>
            <li v-for="item,index in newList" :key="index">
                <!-- params传参数 -->
                <!-- <RouterLink :to="`/news/detail/${item.id}/${item.name}/${item.content}`">{{ item.name }}</RouterLink> -->
                <!-- 第二种 这里不能使用path来写路径 只能使用name-->
                <RouterLink :to="{name:'detail',params:{id:item.id,name:item.name,content:item.content}}">{{ item.name }}</RouterLink>
            </li>
        </ul>
        <!-- 展示区 -->
        <div class="news-contents">
            <RouterView/>
        </div>
    </div>
</template>

<script setup lang="ts" name="News">
    import { reactive } from 'vue'
    import { RouterView , RouterLink} from 'vue-router'
    const newList = reactive([
        {id:'1',name:'很好的食物',content:'西兰花'},
        {id:'2',name:'好玩',content:'原神'},
        {id:'3',name:'好吃',content:'蛋糕边'},
        {id:'4',name:'好看',content:'雷神'},
    ])
</script>

<style scoped>
.News{
    display: flex;
    align-items: center;
    height:100%;
}
</style>